<template>
  <video-player
    :poster="poster"
    crossorigin="anonymous"
    :controls="true"
    :loop="true"
    :volume="0.6"
    :techOrder="['html5', 'flvjs']"
    autoplay="true"
    width="500px"
    height="250px"
    @mounted="handleMounted"
  />
</template>

<script setup>
import { VideoPlayer } from "@videojs-player/vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { ref } from "vue";

const props = defineProps({
  src: {
    type: String,
    default:
      "http://v2h.jdshipin.com/asia_action/asia_action.stream/chunklist.m3u8",
    // "http://zhibo.hkstv.tv/livestream/mutfysrq.flv",
    // "/video-flv",
  },
  videoType: {
    type: String,
    default: "hls",
    // default:"flv",
  },
});
const poster = ref("/src\\assets\\uiResources\\subway.jpeg");

const handleMounted = ({ player }) => {
  if (props.videoType === "hls") {
    player.src(props.src);
  } else if (props.videoType === "flv") {
    // flv.js runs only in the browser environment and does an asynchronous processing for SSR prerender.
    import("/src/cesiumTools/flvjs-tech.js").then(({ FlvJsTech }) => {
      videojs.registerTech("Flvjs", FlvJsTech);
      player.src(props.src);
    });
  }
};
</script>
<style scoped lang="less"></style>
